<template>
  <view class="Cluster">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
    	<swiper-item>
    		<image
    		    src="https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    		    alt=""
    		/></swipe-item>
    	</swiper-item>
    	<swiper-item>
    		<image
    		    src="https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    		    alt=""
    		/></swipe-item>
    	</swiper-item>
		<swiper-item>
<image
         src="https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
         alt=""
     />
		</swiper-item>
    </swiper>
   <!-- 轮播图 -->
   <view class="center_text">
     <view class="left_text">
       <view class="left_name">{{product.productName}}</view>
       <view class="left_much">${{product.price}}</view>
       <view class="xl">销量:1w+</view>
       <view class="yh">店铺优惠卷</view>
     </view>
     <view class="right_text">
       <view class="fenxiang">
         <!-- <img src="@/image/fenxiang.png" alt="" /> -->
         <view style="margin-left:305px;font-size:12px">分享</view>
         <view class="lj">领卷&nbsp></view>
       </view>
     </view>
   </view>
   <view class="solid"></view>
   <view class="dp">
   
     <view v-for="item in joinList">
       <van-viewider />
         <van-row>
   
           <van-col span="8">
             <van-image
               round
               width="2rem"
               height="2rem"
               src="https://img01.yzcdn.cn/vant/cat.jpeg"
             />
             {{item.jointOne}}</van-col>
           <!--<van-col span="4"></van-col>-->
           <van-col span="8">
             <span style="font-size: 1rem">
               还差1人拼成
             </span>
           </van-col>
           <van-col span="8">
             <van-button type="danger" @click="pintuan(item.jointId)">去拼团</van-button>
             </van-col>
         </van-row>
    
     </view>
   </view>
   
  
 <view class="solid"></view>
   <view class="fahuo">
     <view class="fh_text">
       <view class="fahuo_text">
         发货&nbsp&nbsp石家庄&nbsp|&nbsp快递:&nbsp10.00
       </view>
     </view>
     <view class="dizhi">
       <view class="dizhi_text">配送至:石家庄&nbsp桥西区&nbsp红旗大街</view>
     </view>
     <!-- <img src="@/image/jinru.png" alt="" /> -->
   </view>
   <view class="solid"></view>
   <view class="fh">
     <view class="yx_text">
       <view class="yx">已选</view>
       <view class="xg">选择规格</view>
       <view class="jr">
         <!-- <img src="@/image/jinru.png" alt="" style="width:15px;height:15px" /> -->
       </view>
     </view>
     <view class="yx_fw">
       <view class="yx_text">
         <view class="yx">服务</view>
         <view class="xg">其他字段</view>
       </view>
     </view>
   </view>
   <view class="solid"></view>
   
   
   
 
   <view align="center">
   <van-tabs>
     <view class="cpxx" style="">
		 <text style="margin-left: -270rpx;">产品信息</text>
       <view class="xiangqing">
		   
         <h3>{{product.descript}}</h3>
       </view>
     </view>
     <view class="shangppj">
	 <text style="margin-left: -270rpx;">商品评价</text>
       <view class="shangpinpingjia">
         砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人；就我就离开刚进入jge如果未来，将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为；服务金溶解污垢喷，雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污，垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服，务金溶解污垢喷雾剂欧；派微结构两个人就我就离开刚；进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人，就我就离开刚进入jge如，果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离开刚进入jge如果未来将砂岩石归结为服务金溶解污垢喷雾剂欧派微结构两个人就我就离，开刚进入jge如果未来将
       </view>
     </view>
   </van-tabs>

</view>
    <van-goods-action>
      <van-goods-action-icon icon="phone-o" text="联系电话"  />
      <van-goods-action-icon icon="cart-o" text="购物车"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="单独购买" @click="purchase" />
      <van-goods-action-button type="danger" text="拼团购买" @click="ptpurchase" />
    </van-goods-action>
    
    
    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota="quota"
      :quota-used="quota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->
    
    
    <van-sku
      align="left"
      v-model="csshow"
      :sku="cssku"
      :goods="csgoods_info"
      :goods-id="csgoods_id"
      :hide-stock="cssku.hide_stock"
      :quota="csquota"
      :quota-used="csquota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="csinitialSku"
      disable-stepper-input
      :close-on-click-overlay="cscloseOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="csonBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->
    
    
    
    
    <van-sku
      align="left"
      v-model="qptshow"
      :sku="qptsku"
      :goods="qptgoods_info"
      :goods-id="qptgoods_id"
      :hide-stock="qptsku.hide_stock"
      :quota="qptquota"
      :quota-used="qptquota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="qptinitialSku"
      disable-stepper-input
      :close-on-click-overlay="qptcloseOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="qptonBuyClicked"
      :show-add-cart-btn="false"
      buy-text="确认"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->
    





  </view>
</template>
<script>
  // import { GroupfindAllList,GroupfindAllById } from "@/api/commodity/group";
  // import { selectProductById,selectProductLableByProId,selectSupplierCoupon,selectPpiUrl } from '@/api/commodity/shop_product.js'

  // import { jointlistJointById } from "@/api/commodity/joint";

  export default {

  name: "Cluster",
  data() {
    return {
		
      closeOnClickOverlay: true,  //点击空白处关闭购物框
      cscloseOnClickOverlay: true,  //点击空白处关闭购物框
      qptcloseOnClickOverlay: true,  //点击空白处关闭购物框
      show: false,
      qptshow: false,
      csshow: false,
      showpintuan:false,
      showCar: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },

      cssku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },



      qptsku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '规格',
            k_s: 's1',
            v: [],
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: '',  //？？
        stock_num: null, // 商品总库存？？
        none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },



      initialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },
      csinitialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },



      qptinitialSku:{
        // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
        // 值：skuValueId（规格值 id）
        s1: '1',
        // 初始选中数量
        selectedNum: 1,
      },

      jointId:null,

      goods_id: '',
      csgoods_id: '',
      qptgoods_id: '',
      quota: 1, //限购数量 库存旁边显示限购数
      csquota: 1, //限购数量 库存旁边显示限购数
      qptquota: 1, //限购数量 库存旁边显示限购数
      quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      csquota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      qptquota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: '',
        picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
      },
      csgoods_info: {
        title: '',
        picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
      },



      qptgoods_info: {
        title: '',
        picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
      },



      showBase: true,    //sku的框的显示




      joinList:[],
      productId: Number,
      product: Object,
      // show: false,
      liList: [
        {
          id: 0,
          num: 0
        }
      ]
    };
  },

  created(){
    var id = parseInt(this.$route.query.productId);
    this.productId = id;
    const productId = this.$route.query && this.$route.query.productId;
    console.log("====="+productId)
    this.findAllById(productId);

    this.jointJointById(productId);
  },


  methods: {

    // 参加 别人的拼团

    pintuan(jointId){
      this.jointId =jointId;
      // console.log("************aaa*******"+aaa)
      this.qptshow = true;
      this.qptsku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){
        this.qptsku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.qptsku.list.push({ "id": null,"price":(res.data.data[i].groupPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"goods_id":res.data.data[i].productId});
        this.qptgoods_id = res.data.data[i].productId;
        this.qptsku.stock_num += parseInt(res.data.data[i].labelQuantity);

      }
      // console.log(this.sku.tree);
      // console.log(res.data);
    });
    },


    jointJointById(productId){
      jointlistJointById(productId).then(res=>{
        this.joinList = res.data.data;
      })
    },


    // 拼团购买

    ptpurchase(){
      this.csshow = true;

      this.cssku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){

        this.cssku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.cssku.list.push({ "id": null,"price":(res.data.data[i].groupPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"csgoods_id":res.data.data[i].productId});
        this.csgoods_id = res.data.data[i].productId;
        this.cssku.stock_num += parseInt(res.data.data[i].labelQuantity);
      }

      // console.log(this.sku.tree);
      // console.log(res.data);
    });

    },


    // 单独购买

    purchase(){
      this.show = true;
      this.sku.tree = [
        {
          k: '规格',
          k_s: 's1',
          v: [],
        },
      ];
      selectProductLableByProId(this.productId).then((res) =>{
        for (let i = 0; i < res.data.data.length; i++){
        this.sku.tree[0].v.push({ "id": res.data.data[i].labelId,"name":res.data.data[i].labelName,"imgUrl":res.data.data[i].productPicInfo.picUrl});
        this.sku.list.push({ "id": null,"price":(res.data.data[i].labelPrice)*100,"discount":null,
          "s1":res.data.data[i].labelId,"stock_num":parseInt(res.data.data[i].labelQuantity),"goods_id":res.data.data[i].productId});
        this.goods_id = res.data.data[i].productId;
        this.sku.stock_num += parseInt(res.data.data[i].labelQuantity);

      }
      // console.log(this.sku.tree);
      // console.log(res.data);
    });
    },

    customSkuValidator(){

    },
    onBuyClicked(sku) {
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/OrderDetails",
        query:{
          skuId: sku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:sku.selectedNum
        }
      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
    },

    qptonBuyClicked(qptsku) {
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/Altwo",
        query:{
          skuId: qptsku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:qptsku.selectedNum,
          jointId:this.jointId
        }
      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
    },



    csonBuyClicked(cssku){
      // console.log(JSON.stringify(sku.selectedNum));
      this.$router.push({
        path:"/Alone",
        query:{
          skuId: cssku.selectedSkuComb.s1,
          productId:this.product.productId,
          selectedNum:cssku.selectedNum
        }
      });
      // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});

    },








    findAllById(productId){
      GroupfindAllById(productId).then(res=>{
        this.product = res.data.data;
      })
    },

    showPopup() {
      this.show = true;
    },
    cuts: function(idx) {
      if (this.liList[idx].num < 1) return;
      this.liList[idx].num--;
      this.total--;
    },
    add: function(idx) {
      this.liList[idx].num++;
      this.total++;
    },

    toBack() {
      this.$router.go(-1); //返回上一层
    },
    // msp() {
    //   this.$router.push({
    //     path: "/Cluster"
    //   });
    // },
    toBack() {
      this.$router.go(-1); //返回上一层
    },
    goumai() {
      this.$router.push({
        path: "/Alone"
      });
    },





  }
};
</script>
<style scoped>
	swiper image{
		width: 100%;
	}
.head {
  width: 100%;
  height: 44px;
  display: flex;
  /* position: fixed; */
  /* background-color: aqua; */
}
.head img {
  width: 20px;
  height: 18px;
  float: left;
  margin-top: 13px;
  color: #080808 10000%;
}
.head .xs {
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 44px;
  margin-left: 15px;
}
.head .head_text {
  font-size: 18px;
  color: #222222 10000%;
  text-align: center;
  line-height: 44px;
  margin-left: 20px;
}
.fx img {
  width: 20px;
  height: 20px;
  margin-left: 200px;
}
.swipe-item img {
  width: 100%;
  height: 414px;
}
.img img {
  width: 100%;
}
.center_text {
  width: 100%;
  height: 115px;
  /* background-color: aqua; */
}
.left_text {
  width: 202px;
  height: 120px;
  overflow: hidden;
  /* background-color: pink; */
}
.left_name {
  font-size: 14px;
  margin-top: 20px;
  margin-left: -10px;
}
.left_much {
  font-size: 20px;
  float: left;
  margin-left: 30px;
  margin-top: 10px;
  color: #101010 10000%;
}
.xl {
  margin-top: 10px;
  font-size: 14px;
}
.yh {
  left: 20px;
  top: 580px;
  width: 85px;
  height: 22px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(253, 243, 241, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(194, 73, 76, 72);
  margin-top: 15px;
  margin-left: 30px;
  color: pink;
  line-height: 22px;
}
.fenxiang img {
  width: 20px;
  height: 20px;
  margin-left: 330px;
  margin-top: -100px;
  color: #c8af7f;
}
.lj {
  margin-left: 250px;
  font-size: 14px;
  margin-top: 30px;
  color: red;
}
.solid {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
.dp {
  width: 100%;
  height: 151px;
  /* background-color: powderblue; */
}
.img_tx {
  width: 100%;
  height: 55px;
  overflow: hidden;
  /* background-color: purple; */
}
.img_tx img {
  width: 49px;
  height: 49px;
  margin-left: 20px;
  border-radius: 50%;
  margin-top: 5px;
  /* background-color: purple; */
}
.dp_text {
  margin-top: -45px;
  float: left;
  margin-left: 75px;
  font-size: 15px;
}
.bao_img img {
  width: 19px;
  height: 19px;
  margin-top: -20px;
  margin-left: 73px;
}
.bao_text {
  margin-top: -18px;
  float: left;
  margin-left: 95px;
}
.jdgg {
  width: 85px;
  height: 25px;
  line-height: 25px;
  border-radius: 10px;
  background-color: rgba(200, 175, 127, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.4);
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  float: right;
  margin-right: 10px;
  margin-top: -45px;
  color: white;
}
.hd {
  /* margin-top: 20px; */
  width: 100%;
  height: 176px;
  /* display: flex; */
  margin-top: -80px;
  /* background-color: purple; */
}
.fh {
  width: 100%;
  height: 76px;

  /* background-color: pink; */
}
.fh .yx_text {
  width: 100%;
  height: 30px;
  /* background-color: powderblue; */
}
.yx_text .yx {
  float: left;
  margin-left: 20px;
  color: #717070;
  line-height: 30px;
  font-family: PingFangSC-bold;
}
.yx_text .xg {
  float: left;
  line-height: 30px;
  margin-left: 20px;
  color: rgba(102, 102, 102, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.yx_text .jr {
  float: right;
  line-height: 30px;
}
.fh .yx_fw {
  width: 100%;
  height: 30px;
  /* margin-top: 20px; */
  /* background-color: red; */
  margin: 10px auto;
}
.fahuo {
  width: 100%;
  height: 62px;
  font-size: 14px;
  /* background-color: red; */
}
.fh_text {
  width: 100%;
  height: 30px;
  /* float: left; */
  /* background-color: pink; */
}
.fh_text .fahuo_text {
  float: left;
  margin-left: 20px;
}
.dizhi {
  width: 100%;
  height: 30px;
  /* background-color: peru; */
}
.dizhi .dizhi_text {
  float: left;
  margin-left: 20px;
}
.fahuo img {
  width: 15px;
  height: 15px;
  float: right;
  margin-top: -40px;
  color: gray;
}
.cpxx {
  margin-left: -130px;
  color: black;
  font-size: 16px;
}
.xiangqing {
  width: 300px;
  height: 400px;
  margin-left: 170px;
  font-size: 12px;
  text-align: left;
  margin-top: 20px;

  /* background-color: pink; */
}
.shangppj {
  margin-left: -130px;
  color: black;
  font-size: 16px;
}
.shangpinpingjia {
  width: 300px;
  margin-top: 20px;
  height: 400px;
  margin-left: 170px;
  font-size: 12px;
  text-align: left;
}
.tabbar {
  width: 100%;
  height: 55px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
}
.iphone {
  line-height: 20px;
  /* margin-left: 10px; */
}
.iphone img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 10px;
}
.car {
  line-height: 20px;
  margin-left: 10px;
}
.car img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 7px;
}
.shop {
  line-height: 20px;
  margin-left: 10px;
}
.shop img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 3px;
}
.alone {
  left: 164px;
  top: 1438px;
  width: 120px;
  height: 56px;
  margin-left: 5px;
  border-radius: 20px 0px 0px 20px;
  background-color: rgba(164, 110, 74, 100);
  text-align: center;
}
.group {
  left: 289px;
  top: 1438px;
  width: 120px;
  height: 56px;
  border-radius: 0px 20px 20px 0px;
  background-color: rgba(195, 155, 115, 100);
  text-align: center;
}
.money {
  line-height: 20px;
  margin-top: 10px;
  font-size: 14px;
}
.ddgm {
  line-height: 20px;
  font-size: 14px;
}
.yes {
  font-size: 16px;
  width: 370px;
  height: 42px;
  line-height: 42px;
  border-radius: 25px;
  background-color: rgba(195, 155, 115, 100);
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  margin-top: 50px;
}

.cut {
  width: 37px;
  height: 35px;
  margin-left: 150px;
  margin-top: 15px;
}
.add {
  width: 37px;
  height: 35px;
}
.guige1:hover {
  background-color: #f86902;
  color: rgba(164, 110, 74, 100);
}
.details {
  width: 100%;
  height: 130px;
  display: flex;
  overflow: hidden;
  margin-top: 20px;
  /* background-color: pink; */
}
.img {
  display: flex;
  width: 115px;
  height: 115px;
}
.much {
  margin-left: 10px;
  font-size: 18px;
  color: rgba(16, 16, 16, 100);
}
.kucun {
  display: flex;
  font-size: 14px;
  margin-top: 30px;
  margin-left: -40px;
  color: gray;
}
.gg {
  margin-top: 55px;
  font-size: 14px;
  margin-left: -67px;
}
.solid {
  width: 100%;
  height: 1px;
  background-color: #888;
}
.guige {
  width: 100%;
  height: 85px;
  /* background-color: pink; */
}
.guige_text {
  width: 100%;
  height: 42px;
  text-align: left;
  margin-left: 10px;
  font-size: 14px;
  color: rgba(16, 16, 16, 100);
  font-family: PingFangSC-regular;
  /* background-color: green; */
}
.twogg {
  display: flex;
  margin-left: 20px;
}
.guige1 {
  width: 141px;
  height: 33px;
  line-height: 33px;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 100);
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(164, 110, 74, 100);
}
.guige2 {
  width: 141px;
  height: 33px;
  line-height: 33px;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 100);
  color: rgba(164, 110, 74, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  margin-left: 10px;
  border: 1px solid rgba(164, 110, 74, 100);
}
.num_text {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
